<template>
  <div>
    <div class="list">
      <router-link
        v-for="(item, index) in list"
        :key="index"
        class="list-item"
        to="/detail"
      >
        <img :src="item.fengmian" class="fengmian" />
        <p>{{ item.title }}</p>
        <div class="userInfo">
          <img :src="item.avatar" />
          <span>{{ item.username }}</span>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u351.png",
          title: "不用烤箱也能美味！新手...",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "不会做饭的西瓜",
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u132.png",
          title: "不用烤箱也能美味！新手...",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "不会做饭的西瓜",
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u363.png",
          title: "不用烤箱也能美味！新手...",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "不会做饭的西瓜",
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u362.png",
          title: "不用烤箱也能美味！新手...",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "不会做饭的西瓜",
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 12px;
  line-height: 20px;
  padding-bottom: 60px;
  .list-item {
    width: calc(50% - 6px);
    .fengmian {
      width: 100%;
      // height: 202px;
      height: 80%;
    }
    span {
      color: #999;
    }
    p {
      color: #000;
    }
  }
}
</style>
